<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Basic DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="./easyui-1.9.15/themes/material/easyui.css">
	<link rel="stylesheet" type="text/css" href="./easyui-1.9.15/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="./easyui-1.9.15/demo/demo.css">
	<script type="text/javascript" src="./easyui-1.9.15/jquery.min.js"></script>
	<script type="text/javascript" src="./easyui-1.9.15/jquery.easyui.min.js"></script>
</head>
<body>
	<table class="easyui-datagrid"
			data-options="
			pagination:true,
			fitColumns:true,
			fit:true,
			singleSelect:true,
			collapsible:true,
			url:'datagrid_data1.json',
			method:'get'">
		<thead>
			<tr>
				<th data-options="field:'itemid'">Item ID</th>
				<th data-options="field:'productid'">Product</th>
				<th data-options="field:'listprice',align:'right'">List Price</th>
				<th data-options="field:'unitcost',align:'right'">Unit Cost</th>
				<th data-options="field:'attr1'">Attribute</th>
				<th data-options="field:'status',align:'center'">Status</th>
			</tr>
		</thead>
	</table>
	
	<script>
	//参数在jquery.easyui.min.js中查找设置，所有参数都必要
	$.fn.pagination.defaults.layout     = ["list","sep","first","prev","sep","links","sep","next","last","sep","refresh","info"];
	$.fn.datagrid.defaults.pageSize     = 30;
	$.fn.datagrid.defaults.pageList     = [10,20,30,40,50,60,70,80,90,100,200,300,400,500,1000];
	$.fn.datagrid.defaults.showPageList = true;
	$.fn.datagrid.defaults.showFooter   = true;
	$.fn.datagrid.defaults.nowrap       = false;
	$.fn.datagrid.defaults.pagination   = true;
	$.fn.datagrid.defaults.method       = 'post';
	$.fn.datagrid.defaults.rownumbers   = false;
	$.fn.datagrid.defaults.fitColumns   = true;
	$.fn.datagrid.defaults.border       = false;
	$.fn.datagrid.defaults.striped      = true;
	$.fn.datagrid.defaults.singleSelect = true;
	$.fn.datagrid.defaults.emptyMsg     = "<span style='color:red'>没有找到相关数据</span>";
	
	</script>
</body>
</html>